<template>
	<view class="container">
		<!-- 可提现金额 -->
		<view class="available-amount">
			<text class="label">可提现金额</text>
			<text class="amount">¥{{availableAmount}}</text>
		</view>
		
		<!-- 提现金额输入 -->
		<view class="withdraw-form">
			<view class="form-item">
				<text class="label">提现金额</text>
				<view class="input-wrap">
					<text class="currency">¥</text>
					<input 
						type="digit" 
						v-model="amount" 
						placeholder="请输入提现金额"
						class="amount-input"
					/>
				</view>
			</view>
			
			<!-- 提现方式 -->
			<view class="form-item">
				<text class="label">提现方式</text>
				<view class="method-list">
					<view 
						class="method-item" 
						v-for="(item, index) in withdrawMethods" 
						:key="index"
						:class="{ active: currentMethod === item.value }"
						@tap="selectMethod(item.value)"
					>
						<image :src="item.icon" mode="aspectFit" class="method-icon"></image>
						<text class="method-name">{{item.name}}</text>
						<text class="method-desc">{{item.desc}}</text>
						<text class="check-icon" v-if="currentMethod === item.value">✓</text>
					</view>
				</view>
			</view>
			
			<!-- 提现账户 -->
			<view class="form-item" v-if="currentMethod === 'alipay'">
				<text class="label">支付宝账号</text>
				<input 
					type="text" 
					v-model="alipayAccount" 
					placeholder="请输入支付宝账号"
					class="account-input"
				/>
			</view>
			<view class="form-item" v-if="currentMethod === 'wechat'">
				<text class="label">微信账号</text>
				<input 
					type="text" 
					v-model="wechatAccount" 
					placeholder="请输入微信账号"
					class="account-input"
				/>
			</view>
			<view class="form-item" v-if="currentMethod === 'bank'">
				<text class="label">开户银行</text>
				<picker 
					mode="selector" 
					:range="bankList" 
					@change="selectBank"
				>
					<view class="picker-wrap">
						<text>{{selectedBank || '请选择开户银行'}}</text>
						<text class="arrow">></text>
					</view>
				</picker>
			</view>
			<view class="form-item" v-if="currentMethod === 'bank'">
				<text class="label">银行卡号</text>
				<input 
					type="number" 
					v-model="bankCard" 
					placeholder="请输入银行卡号"
					class="account-input"
				/>
			</view>
			<view class="form-item" v-if="currentMethod === 'bank'">
				<text class="label">开户人姓名</text>
				<input 
					type="text" 
					v-model="bankHolder" 
					placeholder="请输入开户人姓名"
					class="account-input"
				/>
			</view>
		</view>
		
		<!-- 提现说明 -->
		<view class="withdraw-tips">
			<text class="tip-title">提现说明</text>
			<view class="tip-list">
				<text class="tip-item">1. 单次提现金额不能低于100元</text>
				<text class="tip-item">2. 提现申请将在1-3个工作日内处理</text>
				<text class="tip-item">3. 请确保提现账户信息准确无误</text>
				<text class="tip-item">4. 如有疑问请联系客服</text>
			</view>
		</view>
		
		<!-- 提现按钮 -->
		<view class="withdraw-bar">
			<button 
				class="withdraw-btn" 
				:disabled="!isValid"
				@tap="submitWithdraw"
			>确认提现</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 可提现金额
const availableAmount = ref('888.88')

// 提现金额
const amount = ref('')

// 提现方式
const withdrawMethods = [
	{
		name: '支付宝',
		value: 'alipay',
		icon: '/static/images/alipay.png',
		desc: '1-3个工作日到账'
	},
	{
		name: '微信',
		value: 'wechat',
		icon: '/static/images/wechat.png',
		desc: '1-3个工作日到账'
	},
	{
		name: '银行卡',
		value: 'bank',
		icon: '/static/images/bank.png',
		desc: '1-3个工作日到账'
	}
]

// 当前选择的提现方式
const currentMethod = ref('alipay')

// 支付宝账号
const alipayAccount = ref('')

// 微信账号
const wechatAccount = ref('')

// 银行列表
const bankList = [
	'中国工商银行',
	'中国农业银行',
	'中国建设银行',
	'中国银行',
	'交通银行',
	'招商银行',
	'浦发银行',
	'中信银行',
	'民生银行',
	'光大银行'
]

// 选中的银行
const selectedBank = ref('')

// 银行卡号
const bankCard = ref('')

// 开户人姓名
const bankHolder = ref('')

// 表单验证
const isValid = computed(() => {
	if (!amount.value || parseFloat(amount.value) < 100) return false
	
	switch (currentMethod.value) {
		case 'alipay':
			return !!alipayAccount.value
		case 'wechat':
			return !!wechatAccount.value
		case 'bank':
			return !!selectedBank.value && !!bankCard.value && !!bankHolder.value
		default:
			return false
	}
})

// 选择提现方式
const selectMethod = (method) => {
	currentMethod.value = method
}

// 选择银行
const selectBank = (e) => {
	selectedBank.value = bankList[e.detail.value]
}

// 提交提现
const submitWithdraw = () => {
	if (!isValid.value) return
	
	// 这里可以添加提现申请的接口调用
	uni.showLoading({
		title: '提交中...'
	})
	
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '提现申请已提交',
			icon: 'success'
		})
		// 返回上一页
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}, 1000)
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 120rpx;
}

/* 可提现金额样式 */
.available-amount {
	background-color: #FFFFFF;
	padding: 30rpx;
	text-align: center;
}

.available-amount .label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
	display: block;
}

.available-amount .amount {
	font-size: 48rpx;
	color: #D02B29;
	font-weight: bold;
}

/* 提现表单样式 */
.withdraw-form {
	margin: 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-item:last-child {
	margin-bottom: 0;
}

.form-item .label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.input-wrap {
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #EEEEEE;
	padding-bottom: 10rpx;
}

.currency {
	font-size: 36rpx;
	color: #333;
	margin-right: 10rpx;
}

.amount-input {
	flex: 1;
	font-size: 36rpx;
	color: #333;
}

.account-input {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #333;
	border-bottom: 1rpx solid #EEEEEE;
}

.picker-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	color: #333;
	border-bottom: 1rpx solid #EEEEEE;
}

.picker-wrap .arrow {
	color: #999;
}

/* 提现方式样式 */
.method-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.method-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #F5F5F5;
	border-radius: 8rpx;
	position: relative;
}

.method-item.active {
	background-color: #FFF5F5;
	border: 2rpx solid #D02B29;
}

.method-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

.method-name {
	font-size: 28rpx;
	color: #333;
	margin-right: 20rpx;
}

.method-desc {
	font-size: 24rpx;
	color: #999;
}

.check-icon {
	position: absolute;
	right: 20rpx;
	color: #D02B29;
	font-size: 32rpx;
}

/* 提现说明样式 */
.withdraw-tips {
	margin: 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx;
}

.tip-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.tip-list {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.tip-item {
	font-size: 24rpx;
	color: #999;
}

/* 提现按钮样式 */
.withdraw-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #FFFFFF;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.withdraw-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background-color: #D02B29;
	color: #FFFFFF;
	border-radius: 40rpx;
	font-size: 32rpx;
}

.withdraw-btn[disabled] {
	background-color: #CCCCCC;
}
</style> 